<template>
  <el-dialog custom-class="record-dialog" :show-close="false" title="历史记录" :visible.sync="dialogVisible" width="350px">
    <el-input v-model="keyword" placeholder="搜索" prefix-icon="el-icon-search" style="margin: 0 0 10px" @input="search" />
    <div class="record-list">
      <div v-for="record in filteredList" :key="record.name" class="record">
        <div class="date">{{ dateFormatter(record['updated_at']) }}</div>
        <div class="name">{{ record.name }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'RecordDialog',
    props: {
      recordList: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        keyword: '',
        dialogVisible: false,
        filteredList: [],
      }
    },
    created() {
      this.search()
    },
    methods: {
      showDialog() {
        this.dialogVisible = true
      },
      hideDialog() {
        this.keyword = ''
        this.dialogVisible = false
      },
      search() {
        this.filteredList = this.recordList.filter((_) => {
          return _.name.includes(this.keyword)
        })
      },
      dateFormatter(date) {
        return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
      },
    },
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog.record-dialog {
    .el-dialog__header {
      padding: 15px 15px 0;
      font-size: 14px;
    }
    .el-dialog__body {
      border-top: none;
      padding: 15px;
      font-size: 14px;
    }
    .record {
      display: flex;
      align-items: flex-end;
      margin: 0 0 5px;
      border-radius: 4px;
      cursor: pointer;
      &:last-child {
        margin: 0;
      }

      .date {
        font-size: 12px;
        //color: #999999;
        margin-right: 20px;
      }
      &:hover {
        color: #2f74ff;
      }
    }
  }
</style>
